<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
      rel="stylesheet"
    />
    <link href="/linea/styles.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png" />

    <title>Natours | Exciting tours for adventurous people</title>
  </head>
  <body>
    <div class="navigation">
      <input type="checkbox" id="navi-toggle" class="navigation__checkbox" />
      <label for="navi-toggle" class="navigation__button">
        <span class="navigation__icon"></span>
      </label>
      <div class="navigation__background"></div>
      <nav class="navigation__nav">
        <ul class="navigation__list">
          <li class="navigation__item">
            <a href="#" class="navigation__link"><span>01</span>About Natous</a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link"><span>02</span>Your befits</a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link"
              ><span>03</span>Popular tours</a
            >
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link"><span>04</span>Stories</a>
          </li>
          <li class="navigation__item">
            <a href="#" class="navigation__link"><span>05</span>Book now</a>
          </li>
        </ul>
      </nav>
    </div>
    <header class="header">
      <div class="header__logo-box">
        <img src="/img/logo-white.png" alt="LOGO" class="header__logo" />
      </div>

      <div class="header__text-box">
        <h1 class="heading-primary">
          <span class="heading-primary--main">Outdoors</span>
          <span class="heading-primary--sub">is where life happens</span>
        </h1>

        <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
      </div>
    </header>

    <main>
      <section class="section-about">
        <div class="u-center-text u-mb-lg">
          <h2 class="heading-secondary">
            Exciting tours for adventurous people
          </h2>
        </div>

        <div class="row">
          <div class="col-1-of-2">
            <h3 class="heading-tertiary u-mb-sm">
              You're going to fall in love with nature
            </h3>
            <p class="paragraph">
              Eos ab optio sequi explicabo ducimus excepturi in, porro aliquam
              quasi, eum voluptates sunt iusto illo est nostrum temporibus
              quibusdam alias ut.
            </p>
            <h3 class="heading-tertiary u-mb-sm">
              Live adventures like you never have before
            </h3>
            <p class="paragraph">
              Aperiam culpa nisi est ratione laboriosam odio ex omnis impedit
              veniam officia incidunt commodi assumenda, rerum, eius inventore
              enim optio voluptates laudantium.
            </p>
            <a href="#" class="btn-text">Learn more &rarr;</a>
          </div>
          <div class="col-1-of-2">
            <div class="composition">
              <img
                src="/img/nat-1-large.jpg"
                alt=""
                class="composition__photo composition__photo--p1"
              /><img
                src="/img/nat-2-large.jpg"
                alt=""
                class="composition__photo composition__photo--p2"
              /><img
                src="/img/nat-3-large.jpg"
                alt=""
                class="composition__photo composition__photo--p3"
              />
            </div>
          </div>
        </div>
      </section>

      <section class="section-features">
        <div class="row">
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-world"></i>
              <h3 class="heading-tertiary u-mb-sm">Explore the world</h3>
              <p class="feature-box__text">
                Beatae, cumque. Ducimus quasi repellat veritatis, voluptas
                laudantium nemo quos itaque recusandae velit laborum non quas
                cupiditate veniam incidunt esse ad iusto.
              </p>
            </div>
          </div>
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-compass"></i>
              <h3 class="heading-tertiary u-mb-sm">Meet natrue</h3>
              <p class="feature-box__text">
                Beatae, cumque. Ducimus quasi repellat veritatis, voluptas
                laudantium nemo quos itaque recusandae velit laborum non quas
                cupiditate veniam incidunt esse ad iusto.
              </p>
            </div>
          </div>
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-map"></i>
              <h3 class="heading-tertiary u-mb-sm">Find your way</h3>
              <p class="feature-box__text">
                Beatae, cumque. Ducimus quasi repellat veritatis, voluptas
                laudantium nemo quos itaque recusandae velit laborum non quas
                cupiditate veniam incidunt esse ad iusto.
              </p>
            </div>
          </div>
          <div class="col-1-of-4">
            <div class="feature-box">
              <i class="feature-box__icon icon-basic-heart"></i>
              <h3 class="heading-tertiary u-mb-sm">Live a healthier life</h3>
              <p class="feature-box__text">
                Beatae, cumque. Ducimus quasi repellat veritatis, voluptas
                laudantium nemo quos itaque recusandae velit laborum non quas
                cupiditate veniam incidunt esse ad iusto.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="seaction-tour" id="section-tour">
        <div class="u-center-text u-mb-lg">
          <h2 class="heading-secondary">Most popular tours</h2>
        </div>
        <div class="row">
          <div class="col-1-of-3">
            <div class="card">
              <div class="card__side card__side--front">
                <div class="card__picture card__picture-1"></div>
                <h4 class="card__heading card__heading-1">
                  <span class="card__heading--span card__heading--span-1"
                    >The Sea Explorer</span
                  >
                </h4>
                <div class="card__details">
                  <ul>
                    <li>3 day tours</li>
                    <li>Up to 20 people</li>
                    <li>2 tour guides</li>
                    <li>sleep in cozy hotels</li>
                    <li>Difficulty: easy</li>
                  </ul>
                </div>
              </div>
              <div class="card__side card__side--back card__side--back-1">
                <div class="card__cta">
                  <div class="card__price-box">
                    <p class="card__price-only">Only</p>
                    <p class="card__price-value">$297</p>
                  </div>
                  <a href="#popup" class="btn btn--white">Book now!</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-1-of-3">
            <div class="card">
              <div class="card__side card__side--front">
                <div class="card__picture card__picture-2"></div>
                <h4 class="card__heading card__heading-2">
                  <span class="card__heading--span card__heading--span-2"
                    >The forest hiker</span
                  >
                </h4>
                <div class="card__details">
                  <ul>
                    <li>7 day tours</li>
                    <li>Up to 40 people</li>
                    <li>6 tour guides</li>
                    <li>sleep in provided tents</li>
                    <li>Difficulty: midium</li>
                  </ul>
                </div>
              </div>
              <div class="card__side card__side--back card__side--back-2">
                <div class="card__cta">
                  <div class="card__price-box">
                    <p class="card__price-only">Only</p>
                    <p class="card__price-value">$497</p>
                  </div>
                  <a href="#popup" class="btn btn--white">Book now!</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-1-of-3">
            <div class="card">
              <div class="card__side card__side--front">
                <div class="card__picture card__picture-3"></div>
                <h4 class="card__heading card__heading-3">
                  <span class="card__heading--span card__heading--span-3"
                    >Then snow adventurer</span
                  >
                </h4>
                <div class="card__details">
                  <ul>
                    <li>5 day tours</li>
                    <li>Up to 15 people</li>
                    <li>3 tour guides</li>
                    <li>sleep in provided tents</li>
                    <li>Difficulty: hard</li>
                  </ul>
                </div>
              </div>
              <div class="card__side card__side--back card__side--back-3">
                <div class="card__cta">
                  <div class="card__price-box">
                    <p class="card__price-only">Only</p>
                    <p class="card__price-value">$897</p>
                  </div>
                  <a href="#popup" class="btn btn--white">Book now!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="u-center-text u-mt-xl">
          <a href="#" class="btn btn--green">Discover all tours</a>
        </div>
      </section>

      <section class="section-stories">
        <div class="bg-video">
          <video class="bg-video__content" autoplay loop muted>
            <source src="/img/video.mp4" type="video/mp4" />
            <source src="/img/video.webm" type="video/webm" />
            Your browser is not suppoerted!
          </video>
        </div>

        <div class="u-center-text u-mb-lg">
          <h2 class="heading-secondary">We make people genuinely happy</h2>
        </div>

        <div class="row">
          <div class="story">
            <figure class="story__shape">
              <img src="/img/nat-8.jpg" alt="" class="story__img" />
              <figcaption class="story__caption">Mary Smith</figcaption>
            </figure>
            <div class="story__text">
              <h3 class="heading-tertiary u-mb-sm">
                I had the best week ever with my family
              </h3>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa,
                molestiae sed. Blanditiis doloribus quidem sapiente, voluptas
                tempore dolores. Sed maiores consequuntur cupiditate aliquid
                dignissimos minima corrupti fuga ipsum itaque cumque! Assumenda
                minus in, molestias non dicta rerum iste necessitatibus esse
                saepe dolorem doloribus a quo facilis, quos vel maxime veniam
                sint alias!
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="story">
            <figure class="story__shape">
              <img src="/img/nat-9.jpg" alt="" class="story__img" />
              <figcaption class="story__caption">Jack Wilson</figcaption>
            </figure>
            <div class="story__text">
              <h3 class="heading-tertiary u-mb-sm">
                WOW! My life is completely different now
              </h3>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa,
                molestiae sed. Blanditiis doloribus quidem sapiente, voluptas
                tempore dolores. Sed maiores consequuntur cupiditate aliquid
                dignissimos minima corrupti fuga ipsum itaque cumque! Assumenda
                minus in, molestias non dicta rerum iste necessitatibus esse
                saepe dolorem doloribus a quo facilis, quos vel maxime veniam
                sint alias!
              </p>
            </div>
          </div>
        </div>
        <div class="u-center-text u-mt-xl">
          <a href="#" class="btn-text">Read all stories &rarr;</a>
        </div>
      </section>

      <section class="section-book">
        <div class="row">
          <div class="book">
            <div class="book__form">
              <form action="#" class="form" autocomplete="off">
                <div class="u-mb-md">
                  <h2 class="heading-secondary">Start booking now</h2>
                </div>
                <div class="form__group">
                  <input
                    id="name"
                    type="text"
                    class="form__input"
                    placeholder="Full name"
                    required
                  />
                  <label for="name" class="form__label">Full name</label>
                </div>
                <div class="form__group">
                  <input
                    id="email"
                    type="email"
                    class="form__input"
                    placeholder="Email address"
                    required
                  />
                  <label for="email" class="form__label">Email address</label>
                </div>
                <div class="form__group u-mb-md">
                  <div class="form__radio-group">
                    <input
                      type="radio"
                      class="form__radio-input"
                      id="small"
                      name="size"
                    />
                    <label for="small" class="form__radio-label">
                      <span class="form__radio-button"></span>
                      Small tour group</label
                    >
                  </div>
                  <div class="form__radio-group">
                    <input
                      type="radio"
                      class="form__radio-input"
                      id="large"
                      name="size"
                    />
                    <label for="large" class="form__radio-label">
                      <span class="form__radio-button"></span>
                      Large tour group</label
                    >
                  </div>
                </div>
                <div class="form__group">
                  <button class="btn btn--green">Next step &rarr;</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer__logo-box">
        <img src="/img/logo-green-2x.png" alt="" class="footer__logo" />
      </div>
      <div class="row">
        <div class="col-1-of-2">
          <div class="footer__navigation">
            <ul class="footer__list">
              <li class="footer__item">
                <a href="#" class="footer__link">Company</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Contact us</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Carrers</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Privacy policy</a>
              </li>
              <li class="footer__item">
                <a href="#" class="footer__link">Terms</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-1-of-2">
          <div class="footer__copyright">
            Lorem ipsum, dolor sit amet
            <a href="#" class="footer__link">consectetur</a> adipisicing elit.
            Accusamus, dolores? Laudantium vel vitae saepe. Velit officia amet
            nihil <a href="#" class="footer__link">veritatis</a> illo. Hic ipsa,
            ut sequi quis dolorum non recusandae optio iure!
          </div>
        </div>
      </div>
    </footer>

    <div class="popup" id="popup">
      <div class="popup__content">
        <div class="popup__left">
          <img src="/img/nat-8.jpg" alt="" class="popup__img" />
          <img src="/img/nat-9.jpg" alt="" class="popup__img" />
        </div>
        <div class="popup__right">
          <a href="#section-tour" class="popup__close">&times;</a>
          <h2 class="heading-secondary u-mb-sm">Start booking now</h2>
          <h3 class="heading-tertiary u-mb-sm">
            Important &ndash; Please read these terms before booking
          </h3>
          <p class="popup__text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum
            inventore eos, esse possimus rerum molestiae magnam aliquid maiores
            aut vero est ad perferendis dicta. Deserunt eligendi repudiandae
            corrupti cupiditate enim. Voluptates iusto explicabo odio vitae
            repudiandae omnis nam ex aperiam quaerat ducimus reprehenderit rem
            ea, sit tenetur aut exercitationem iure illum accusantium. Veniam
            officiis corporis incidunt distinctio aliquid harum illo ipsa
            necessitatibus eveniet. Blanditiis odio tempora, minima maxime
            consectetur facere ullam ut quisquam impedit. Fugiat deserunt
            cupiditate neque accusantium enim delectus facere aliquid cumque
            necessitatibus maxime harum, ea praesentium deleniti alias dolorem
            quibusdam excepturi quae ullam.
          </p>
          <a href="#" class="btn btn--green">Book now</a>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
